<template>
  <div class="AI-class clear">
    <div class="ai-top-banner AI-MAW">
      {{ playerOption }}
      <div class="ai-choose-school" style="opacity: 0;visibility: hidden;">
        <template>
          <el-select v-model="schoolCode" placeholder="请选择学校" @change="getLesson">
            <el-option v-for="item in schoolData" :key="item.app_code" :label="item.name" :value="item.app_code">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="ai-banner-btns">
        <el-button class="h_border_img">课堂分析</el-button>
        <el-button class="no_border_img" @click="handleSelect">观察报告</el-button>
        <router-view />
      </div>
    </div>
    <div class="AI-MAW">
      <div class="AI-class-l fl">
        <div class="AI-class-box ai_b_s">
          <div class="AI-class-info">
            <div class="ai-tit">
              <span>授课信息</span>
            </div>
            <div class="search-box">
              <el-input placeholder="搜索课程" v-model="searchClass" @keyup.enter.native="getLessonClick">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getLessonClick"></i>
              </el-input>
              <el-button type="primary" @click="resetSearch">重置</el-button>
            </div>
          </div>
          <div class="AI-table-con">
            <template>
              <table class="class-table">
                <tr>
                  <th>日期</th>
                  <th>课程</th>
                  <th>查看</th>
                </tr>
                <tr v-for="(item, index) of classData" :key="index">
                  <td :title="item.course_date">{{ item.course_date }}</td>
                  <td :title="item.name">{{ item.name }}</td>
                  <td>
                    <el-radio v-model="radio" :label="index" @change="checkLesson(item)"></el-radio>
                  </td>
                </tr>
                <tr v-show="classData.length == 0">
                  <td colspan="3">暂时没有发现数据</td>
                </tr>
              </table>
            </template>
            <div class="AI-class-pageBox">
              <el-pagination background v-if="total_number > page_size" @current-change="change_page"
                :pager-count="pagerCount" :page-size="page_size" :current-page="page_index" layout="prev, pager, next"
                :total="total_number">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="AI-class-tips ai_b_s">
          <p>欢迎使用教学AI数据分析系统！您可通过调整上方 [授课信息] 来选择需要分析的课堂！</p>
        </div>
      </div>
      <div class="AI-class-r fr">
        <div class="class-review ai_b_s">
          <div class="ai-tit">
            <span>视频回看</span>
          </div>
          <div class="video-box">
            <hjPlayer v-if="showVideoPlayer" :playerOption.sync="playerOption">
            </hjPlayer>
            <div v-else class="v-placeholder"></div>
          </div>

        </div>
        <div class="class-engagement ai_b_s">
          <div class="ai-tit clear">
            <span>参与度散点图</span>
            <i class="ai_fangda fr" @click="toggle"></i>
            <template>
              <el-select class="st_input fr" v-model="StuIndex" placeholder="选择学生" @change="selectStudent">
                <el-option v-for="(item, index) in DetailedScore" :key="index"
                  :label="item.StuName + '(' + item.StuID + ')'" :value="index">
                </el-option>
              </el-select>
            </template>
          </div>
          <div class="action-map-box">
            <fullscreen ref="fullscreen" @change="fullscreenChange">
              <div id="action-map" style="width: 100%;height:100%;" ref="actionMap"></div>
            </fullscreen>
          </div>
        </div>
        <div class="teacher-action-l ai_b_s">
          <div class="ai-tit">
            <span>课堂类型分析</span>
          </div>
          <div id="teacher-map1" style="width: 40%;height:92%;" ref="t_map1"></div>
          <div id="teacher-map2" style="width: 40%;height:92%;" ref="t_map2"></div>
          <div class="action-analysis-box">
            <div class="action-box-r1">
              <div class="a-box-r1-l">
                <span class="action-title">学生行为</span>
                <span class="stu-rate">{{ Math.round(StuRate * 100 * 10) / 10 }}%</span>
                <span class="action-title">教师行为</span>
                <span class="teacher-rate">{{ Math.round((1 - StuRate) * 100 * 10) / 10 }}%</span>
              </div>
              <div id="rate-map1" style="display: inline-block;width: 50%;height: 100%;"></div>
            </div>
            <div class="action-box-r2">
              <div class="a-box-r2-l">
                <span>行为转化率</span>
                <span>{{ Math.round(Ch * 100 * 10) / 10 }}%</span>
              </div>
              <div id="rate-map" style="display: inline-block;width: 50%;height: 100%;"></div>
            </div>
            <div class="action-box-r3">
              <p>{{ ModelTypeData[ModelType - 1] }}</p>
              <p>课堂类型</p>
            </div>
          </div>
        </div>
        <div class="teacher-action-r ai_b_s">
          <div class="ai-tit">
            <span>教学行为分析</span>
          </div>
          <div id="teacher-action-map" style="width: 100%;height:100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import hjPlayer from "./../../common/hjPlayer";

import fullscreen from "vue-fullscreen";
import Vue from "vue";
Vue.use(fullscreen);
const echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  components: {
    hjPlayer,
  },
  data() {
    return {
      fullscreen: false,
      activeIndex: "1",
      schoolData: [], //学校select框数据
      schoolCode: "00000000000000000000000000000000", //单级学校的app_code
      searchClass: "", //搜索课程关键字
      classData: [], //左侧边栏课程数据
      classId1: null,
      // 分页
      page_index: 1,
      page_size: 10,
      total_number: 0,
      pagerCount: 5,//超过3页的时候开始折叠分页
      checked: false,
      radio: null,
      lesson_data: null, //选中的课程数据（单个）
      lessonName: null, //选中的课程信息（单个）

      teacher_action_myChart: null,
      action_myChart: null,
      teacher_myChart1: null,
      teacher_myChart: null,
      rate_myChart1: null,
      rate_myChart: null,
      BehaviorRecord: {},
      LessonModel: {},
      StuAvailableScore: {},
      JoinDegree: [], //单个学生的参与度
      StuName: null, //单个学生名字
      StuIndex: null, //select选中一个学生数据在数组的index
      ST_Value: [], //教师行为S-T图
      Rt: 0, //教师行为RT值
      Ch: 0, //教师行为CH值
      StuRate: 0, //学生行为占比
      ModelType: null, //课堂类型
      ModelTypeData: ["练习型", "混合型", "对话型", "讲授型"],
      //教学行为分析图：
      DetailedScore: [], //所有学生的参与度集
      AvgJoinDegree: [], //平均参与度
      // 视频：
      showVideoPlayer: false,
      playerOption: {
        type: 'm3u8',
        url: '',
      },
    };
  },
  created() {
    this.getSchool();
    this.getLesson(); //学校（单级时）页面加载就获取课程信息
    this.init();
  },
  mounted() {
    //页面刷新，或者回退到当前页面，重新显示之前选中的数据
    let schoolCode = sessionStorage.getItem("sCode");
    let classId1 = sessionStorage.getItem("classId1");
    let lesson_item = JSON.parse(sessionStorage.getItem("lesson_item"));

    if (schoolCode != undefined && lesson_item != undefined) {
      this.classId1 = classId1;
      this.schoolCode = schoolCode; //回显学校select框选中项
      this.getLesson(); //回显课程列表
      this.checkLesson(lesson_item); //回显其他图表数据
    }
    // 参与度散点图
    this.action_map();
    // 教师行为
    this.teacher_map1();
    this.teacher_map2();
    // 行为转化率
    this.rate_map1();
    this.rate_map();
    //教学行为分析
    this.teacher_action_map();
    this.init();

  },
  methods: {
    // 获取学校数据
    getSchool() {
      let success = res => {
        this.schoolData = res.data;
      };
      this.$ajax({
        url: "api/ai/school_list",
        method: "get",
        params: {},
        func: { success: success }
      });
    },
    // 搜索课程，搜索框
    getLessonClick() {
      this.page_index = 1;
      this.getLesson();
    },
    // 重置搜索条件按钮
    resetSearch() {
      this.searchClass = "";
      this.getLesson();
    },
    //根据学校id获取该学校的课程
    getLesson() {

      let success = res => {
        // this.page_index = parseInt(res.data.page_index);
        this.total_number = res.data.total_number;
        this.classData = res.data.data;
        //根据之前保存的课程里的id，设置选中状态
        let _data = res.data.data;
        if (this.classId1 != null) {
          for (let i = 0; i < _data.length; i++) {
            if (this.classId1 == _data[i].id) {
              this.radio = i;
            }
          }
        }
      };
      this.$ajax({
        url: "api/ai/course_list",
        method: "get",
        params: {
          app_code: this.schoolCode,
          keyword: this.searchClass,
          page_index: this.page_index,
          page_size: this.page_size
        },
        func: { success: success }
      });
    },
    //课程表格分页
    change_page(val) {
      this.radio = null;
      this.page_index = val;
      this.getLesson();
    },
    //选中课程
    checkLesson(item) {
      // 每次切换课程信息时，先把旧的视频rtmp流清空
      this.showVideoPlayer = false;
      // this.player && this.player.dispose();
      this.playerOption.url = "";
      this.StuIndex = null; //选中的课程改变时，原来选中课程的参与度散点图搜索框清空，
      this.JoinDegree = []; //选中的学生的参与度也需要清空
      let success = res => {
        this.lesson_data = res.data;
        this.BehaviorRecord = res.data.BehaviorRecord;
        this.LessonModel = res.data.LessonModel;
        this.StuAvailableScore = res.data.StuAvailableScore;
        this.ST_Value = res.data.LessonModel.ST_Value;
        this.Rt = res.data.LessonModel.Rt;
        this.Ch = res.data.LessonModel.Ch;
        this.StuRate = res.data.LessonModel.StuRate;
        this.ModelType = res.data.LessonModel.ModelType;
        this.AvgJoinDegree = res.data.StuAvailableScore.AvgJoinDegree;
        this.DetailedScore = res.data.StuAvailableScore.DetailedScore;
        //数据改变的时候，重新加载一下Echarts画图表
        this.action_map();
        this.teacher_map1();
        this.teacher_map2();
        this.rate_map1();
        this.rate_map();
        this.teacher_action_map();
        //视频流地址
        this.showVideoPlayer = true;
        this.playerOption.url = item.url;
        //缓存选中的课程
        sessionStorage.setItem("sCode", this.schoolCode);
        sessionStorage.setItem("classId1", item.id);
        this.classId1 = item.id;
        sessionStorage.setItem(
          "lesson_data",
          JSON.stringify(deep_clone(res.data))
        );
        sessionStorage.setItem("lesson_item", JSON.stringify(deep_clone(item)));
      };
      this.$ajax({
        url: "api/ai/course_info",
        method: "get",
        params: {
          LessonID: item.LessonID
        },
        func: { success: success }
      });
    },

    // echarts图表自适应
    init() {
      window.addEventListener("resize", () => {
        //解决全屏之后，自适应问题。canvas外边的盒子一定要给高度，否则，页面进来的时候高度不是100% .class-engagement>div:nth-child(2)
        this.action_myChart.resize();
        this.teacher_myChart1.resize();
        this.teacher_myChart2.resize();
        this.rate_myChart1.resize();
        this.rate_myChart.resize();
        this.teacher_action_myChart.resize();
      });
    },
    //参与度散点图全屏
    toggle() {
      this.$refs["fullscreen"].toggle();
    },
    fullscreenChange(fullscreen) {
      this.fullscreen = fullscreen;
    },
    // 观察报告按钮
    handleSelect() {
      if (this.lesson_data != null) {
        this.$router.push({
          name: "report",
          params: {
            // lessonName: this.lessonName,
            // lesson_data: this.lesson_data,
          }
        });
      } else {
        this.$message.warning("请先选择一个课程,再查看报告哦~");
      }
    },
    // 选择学生select
    selectStudent() {
      this.StuName = this.DetailedScore[this.StuIndex].StuName;
      this.JoinDegree = this.DetailedScore[this.StuIndex].JoinDegree;
      this.action_map();
    },
    //重组数组:echarts曲线图需要的数组格式[[时间，参与度],[时间，参与度],[时间，参与度],[时间，参与度],[时间，参与度],[时间，参与度]....]
    trans(arr1, arr2) {
      let result = [];
      if (arr1 != undefined && arr2 != undefined) {
        for (var i = 0; i < arr1.length; i++) {
          result.push([arr1[i], arr2[i]]);
        }
      }
      return result;
    },
    //参与度散点图
    action_map() {
      let _JoinDegree = this.JoinDegree; //选中的学生参与度
      let _Timestamp = this.StuAvailableScore.Timestamp; //横坐标时间
      let _DetailedScore = this.StuAvailableScore.DetailedScore; //所有学生数据数组
      let _AvgJoinDegree = this.StuAvailableScore.AvgJoinDegree; //平均参与度
      //将所有学生参与度数组，合并重组：
      let allStudentsPoint = [];
      // console.log(typeof(_DetailedScore))
      if (_DetailedScore != undefined && typeof (_DetailedScore) == "object") {
        for (i in _DetailedScore) {
          this.trans(_Timestamp, _DetailedScore[i].JoinDegree).forEach(item => {
            allStudentsPoint.push(item);
          });
        }
      } else if (_DetailedScore != undefined && typeof (_DetailedScore) == "Array") {
        for (var i = 0; i < _DetailedScore.length; i++) {
          this.trans(_Timestamp, _DetailedScore[i].JoinDegree).forEach(item => {
            allStudentsPoint.push(item);
          });
        }
      }
      // console.log(allStudentsPoint)
      this.action_myChart = echarts.init(document.getElementById("action-map"));
      this.action_myChart.setOption({
        // 如果要显示legend，那legend的data数组里面的data的名字和series数组中的 name属性要一致；另外要tooltip展示能正常，想要获取到series里面的所有数据，那必须设置legend；
        //因为设计图不显示legend，所以这里让legend名字和series的name 不一致,随意给了11,22,33
        legend: {
          data: ["11", "22", "33"],
          itemStyle: {
            normal: {
              lineStyle: {
                color: ["transparent", "transparent"]
              }
            }
          },
          textStyle: {
            color: "transparent"
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            //params 0平均参与度曲线，1是选中的学生参与度曲线，2和之后的索引值代表散点
            // 如果没选中学生，那学生参与度曲线就不显示，鼠标hover上去的时候，找不到线，所以只有一个横坐标值，而纵坐标：params[1].data[1]为undefined
            //如果select框没选择学生时，图里只有平均参与度曲线，和所有学生参与度的三点，这时hover只显示：平均参与度曲线的提示
            if (params[1].data[1] == undefined) {
              // return '时间  ：' + params[0].value[0] + 's' + '<br/>'
              //   + params[0].seriesName+':' + params[0].value[1] + '%' + '<br/>'
            } else {
              return (
                params[1].seriesName +
                " :<br/>" +
                "时间  ：" +
                params[1].value[0] +
                "s" +
                "<br/>" +
                "参与度：" +
                params[1].value[1] +
                "%"
              );
            }
          }
        },
        xAxis: {
          name: "时间/s",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          max: _Timestamp == undefined ? 0 : _Timestamp[_Timestamp.length - 1],
          data: _Timestamp
        },
        yAxis: {
          name: "参与度/%",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          },
          max: 100,
        },
        series: [
          //平均曲线
          {
            name: "平均参与度",
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#FFA720",
            data: this.trans(_Timestamp, _AvgJoinDegree)
          },
          //筛选中的学生参与度曲线
          {
            name: this.StuName,
            type: "line",
            symbol: "none",
            color: "#81FF86",
            data: this.trans(_Timestamp, _JoinDegree)
          },
          // 全体学生参与度散点
          {
            name: "某个学生",
            type: "scatter",
            color: "#08fcff",
            symbolSize: 6,
            data: allStudentsPoint
          }
        ]
      });
      this.action_myChart.resize();
    },
    //S-T图：
    teacher_map1() {
      this.teacher_myChart1 = echarts.init(
        document.getElementById("teacher-map1")
      );
      let show_data = this.ST_Value;
      let _max = show_data[show_data.length - 1];
      let x_value = [];
      for (var i = 0; i < _max; i++) {
        x_value.push(i);
      }
      this.teacher_myChart1.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "T",
          nameLocation: "end",
          type: "category",
          boundaryGap: false,
          splitNumber: 5,
          max: _max,
          min: 0,
          data: x_value,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          }
        },
        yAxis: {
          name: "S",
          nameLocation: "end",
          max: _max,
          splitNumber: 5,
          min: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          {
            name: "S-T曲线",
            type: "line",
            step: "end",
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "rgb(33,148,246)",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: show_data
          }
        ]
      });
      this.teacher_myChart1.resize();
    },
    //RT-CH图：
    teacher_map2() {
      this.teacher_myChart2 = echarts.init(
        document.getElementById("teacher-map2")
      );
      this.teacher_myChart2.setOption({
        tooltip: {
          trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
          axisPointer: {
            type: "effectScatter" //这里只有hover在辐射点之上才触发
          },
          formatter: function(param) {
            //显示框自定义
            return (
              '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
              "<span>" +
              param.data[1].toFixed(2) +
              "</span>" +
              "</p>" +
              '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
              "<span>" +
              param.data[0].toFixed(2) +
              "</span>" +
              "</p>"
            );
          }
        },
        xAxis: {
          name: "RT",
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          //隐藏方格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "CH",
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          // 提示点
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.Rt, this.Ch]],
            color: "#08fcff"
          },
          //线
          {
            data: [[0, 0], [0.5, 1], [1, 0]],
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#979797"
          },
          {
            data: [[0.2, 0.4], [0.8, 0.4]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [[0.3, 0], [0.3, 0.6]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [[0.7, 0], [0.7, 0.6]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          // 标注文字
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.6]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["对话型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.13, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["练习型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["混合型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.74, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["讲授型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          }
        ]
      });
      this.teacher_myChart2.resize();
    },
    //学生/教师行为占比饼图：
    rate_map1() {
      this.rate_myChart1 = echarts.init(document.getElementById("rate-map1"));
      this.rate_myChart1.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}:{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            color: ["#08A8FF", "#08FCFF"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              { value: this.StuRate, name: "学生行为" },
              { value: 1 - this.StuRate, name: "教师行为" }
            ]
          }
        ]
      });
    },
    //行为转化率饼图：
    rate_map() {
      this.rate_myChart = echarts.init(document.getElementById("rate-map"));
      this.rate_myChart.setOption({
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            color: ["#F0D600", "#00145A"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [{ value: this.Ch }, { value: 1 - this.Ch }]
          }
        ]
      });
    },
    //教学行为分析嵌套饼图:
    teacher_action_map() {
      this.teacher_action_myChart = echarts.init(
        document.getElementById("teacher-action-map")
      );
      this.teacher_action_myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {d}%"
        },
        color: [
          "#78F8FC",
          "#38C3FF",
          "#2CA1FF",
          "#21DBF3",
          "#E0D901",
          "#E4BF00",
          "#D9CC00",
          "#F6DB49"
        ],
        legend: {
          data: [
            "走动讲课",
            "站立授课",
            "下讲台授课",
            "板书",
            "听讲",
            "读写",
            "举手",
            "互动"
          ],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "教师",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"], //可调整饼图相对于父盒子的位置
            data: [
              {
                value:
                  this.BehaviorRecord.Tch == undefined
                    ? 0
                    : this.BehaviorRecord.Tch.StandOn,
                name: "站立授课"
              },
              {
                value:
                  this.BehaviorRecord.Tch == undefined
                    ? 0
                    : this.BehaviorRecord.Tch.DownPlatform,
                name: "下讲台授课"
              },
              {
                value:
                  this.BehaviorRecord.Tch == undefined
                    ? 0
                    : this.BehaviorRecord.Tch.BlackBoard,
                name: "板书"
              },
              {
                value:
                  this.BehaviorRecord.Tch == undefined
                    ? 0
                    : this.BehaviorRecord.Tch.Moving,
                name: "走动讲课"
              }
            ]
          },
          {
            name: "学生",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value:
                  this.BehaviorRecord.Stu == undefined
                    ? 0
                    : this.BehaviorRecord.Stu.RaiseHand,
                name: "举手"
              },
              {
                value:
                  this.BehaviorRecord.Stu == undefined
                    ? 0
                    : this.BehaviorRecord.Stu.ReadWrite,
                name: "读写"
              },
              {
                value:
                  this.BehaviorRecord.Stu == undefined
                    ? 0
                    : this.BehaviorRecord.Stu.Listening,
                name: "听讲"
              },
              {
                value:
                  this.BehaviorRecord.Stu == undefined
                    ? 0
                    : this.BehaviorRecord.Stu.Interaction,
                name: "互动"
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
